import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
    message
  } from 'antd'
  import { PlusOutlined } from '@ant-design/icons'
  import { Link, useSearchParams } from 'react-router-dom'
  import './index.scss'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useEffect, useState } from 'react'
import { createArticleAPI, getArticleById, updateArticleAPI } from '@/apis/article'
import { http } from '@/utils'
import { useChannel } from '@/hooks/useChannel'
  
  const { Option } = Select
  
  const Publish = () => {
    const {channels} =useChannel()

    //3.提交表单数据
    const onFinish=async(formValue)=>{
      if(imageType!==imageList.length) return message.warning('图片类型和数量不一致')
      console.log(formValue)
      const {channel_id,content,title}=formValue
      const formatUrl=(list)=>{
        return list.map(item=>{
          if(item.response){
            return item.response.data.url
          }else{
            return item.url
          }
        })
      }
      const reqData={
        title,
        content,
        type: imageType,
        cover:{
          type:imageType,
          //5.发布带封面的文章
          images:formatUrl(imageList)
        },
        channel_id
      }
      if(articleId){//编辑
        await updateArticleAPI({...reqData,id:articleId})
      }else{//新增
        await createArticleAPI(reqData)
      }
      message.success(`${articleId?'编辑':'发布'}文章成功`)
    }
    //4.实现封面的基础上传
    const [imageList,setImageList]=useState([])
    const onChange=(value)=>{
      console.log(value)
      setImageList(value.fileList)
    }

    //5.切换图片type
    const [imageType,setImageType]=useState(0)
    const onTypeChange=(e)=>{
      //console.log(e)
      setImageType(e.target.value)
    }

    //6.回填数据
    const [searchParams]=useSearchParams()
    const articleId=searchParams.get('id')
    //获取实例
    const[form]=Form.useForm()
    console.log(articleId)
    useEffect(() => {
      async function getArticle () {
        const res = await getArticleById(articleId)
        
        // 1. 回填表单数据
        form.setFieldsValue({ ...res.data, type: res.data.cover.type })
        // 2. 回填封面图片
        setImageType(res.data.cover.type) // 封面类型
        setImageList(res.data.cover.images.map(url =>{
          return { url }
        }
          )) // 封面list
      }
      articleId&&getArticle()
    }, [articleId, form])
 

    return (
      <div className="publish">
        <Card
          title={
            <Breadcrumb items={[
              { title: <Link to={'/'}>首页</Link> },
              { title: `${articleId?'编辑文章':'发布文章'}` },
            ]}
            />
          }
        >
          <Form
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ type: 0 }}
            onFinish={onFinish}
            form={form}
          >
            <Form.Item
              label="标题"
              name="title"
              rules={[{ required: true, message: '请输入文章标题' }]}
            >
              <Input placeholder="请输入文章标题" style={{ width: 400 }} />
            </Form.Item>
            <Form.Item
              label="频道"
              name="channel_id"
              rules={[{ required: true, message: '请选择文章频道' }]}
            >
              <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                {channels.map(item=>(<Option key={item.id} value={item.id}>{item.name}</Option>))}
                
              </Select>
            </Form.Item>
            <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group onChange={onTypeChange}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            {imageType>0&&
            <Upload
            listType="picture-card"
            showUploadList
            name='image'
            action={'/upload'}
            onChange={onChange}
            maxCount={imageType}
            fileList={imageList}
          >
            <div style={{ marginTop: 8 }}>
              <PlusOutlined />
            </div>
          </Upload>
            }
          </Form.Item>
            <Form.Item
              label="内容"
              name="content"
              rules={[{ required: true, message: '请输入文章内容' }]}
            >
                <ReactQuill
                className='publish-quill'
                theme='snow'
                placeholder='请输入文章内容'
            />
            </Form.Item>
  
            <Form.Item wrapperCol={{ offset: 4 }}>
              <Space>
                <Button size="large" type="primary" htmlType="submit">
                  发布文章
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
  
  export default Publish